<template>
    <view class="s-m-box">
        <view class="s-box" @click="show('show', shopList, curShop)"
            >{{ curShop.name
            }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
        >
        <view class="s-box" @click="show('show', ucpList, curUcp)"
            >{{ curUcp.name
            }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
        >
        <view class="s-box" @click="show('show', timeGroup, curTime)"
            >{{ curTime.name
            }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
        >
        <view
            class="good-mask mask-top"
            :style="
                !isExpand ? 'margin-left: 72px; width: calc(100% - 68px)' : ''
            "
            :class="state === 0 ? 'none' : state === 1 ? 'show' : ''"
            @click="show"
        >
            <view class="cate-content">
                <scroll-view scroll-y class="c-list comm-list">
                    <view v-for="item in list" :key="item.id">
                        <view
                            class="cate-item"
                            :class="curItem.id == item.id ? 'cate-item-s' : ''"
                            @click="changItem(item)"
                            >{{ item.name
                            }}<text
                                class="icon-font selected-icon"
                                v-show="curItem.id == item.id"
                                >&#xe636;</text
                            ></view
                        >
                    </view>
                </scroll-view>
            </view>
        </view>
        <dateWin ref="dateWin" @selectDate="selectDate"></dateWin>
    </view>
</template>

<script>
import lang from "../../../js/conf/Lang.js";
import dateWin from "../../comm/DateWin.vue";
import { mapGetters } from "vuex";
export default {
    computed: {
        ...mapGetters(["isExpand"]),
    },
    components: { dateWin },
    data() {
        return {
            curItem: {},
            list: [],
            state: 0,

            curShop: { name: "团队", id: "", type: 1 },
            shopList: [],

            curUcp: { name: "支付方式", id: "", type: 2 }, //当前经手人
            ucpList: [],

            curTime: { name: lang.report.allTimeTxt, id: "", type: 3 },
            //1 日报 2月报 3季报  5 自定义
            timeGroup: [
                {
                    name: lang.report.allTimeTxt, //1 日报 2月报 3季报  5 自定义
                    id: "",
                    type: 3,
                },
                {
                    name: lang.report.dayTxt, //1 日报 2月报 3季报  5 自定义
                    id: 1,
                    type: 3,
                },
                {
                    name: lang.report.moonTxt, //1 日报 2月报 3季报  5 自定义
                    id: 2,
                    type: 3,
                },
                {
                    name: lang.report.seasonsTxt, //1 日报 2月报 3季报  5 自定义
                    id: 3,
                    type: 3,
                },
                {
                    name: lang.report.customTxt, //1 日报 2月报 3季报  5 自定义
                    id: 5,
                    type: 3,
                    st: "",
                    et: "",
                },
            ],

            toTxt: lang.saleReport.toTxt,
        };
    },
    methods: {
        initData(data) {
            this.shopList = [{ name: "全部团队", id: "", type: 1 }];
            if (data.group_ls) {
                let arr = this.getListArr(data.group_ls, 1);
                this.shopList = this.shopList.concat(arr);
            }
            this.ucpList = [{ name: "全部支付方式", id: "", type: 2 }];
            if (data.paytype_ls) {
                let arr = this.getListArr(data.paytype_ls, 2);
                this.ucpList = this.ucpList.concat(arr);
            }
        },

        getListArr(arr, type) {
            let len = arr.length;
            let tempArr = [];
            for (let i = 0; i < len; i++) {
                let o = arr[i];
                let temp = {};
                temp.name = o.name || o.title;
                temp.id = o.id || o.groupid;
                temp.type = type;
                tempArr.push(temp);
            }
            return tempArr;
        },

        show(type, arr, cItem) {
            if (type == "show") {
                this.curItem = cItem;
                this.list = arr;
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.state = 2;
            setTimeout(() => {
                this.state = state;
            }, timer);
        },
        changItem(item) {
            if (item.type == 1) {
                this.curShop = item;
            } else if (item.type == 2) {
                this.curUcp = item;
            } else if (item.type == 3) {
                // this.curTime.name = item.name;
                // this.curItem.id = item.id;
                if (item.id == 5) {
                    this.$refs.dateWin.show("show");
                    return;
                } else {
                    this.curTime.name = item.name;
                    this.curTime.id = item.id;
                    this.curTime.st = "";
                    this.curTime.et = "";
                }
            }
            let data = {};
            data.curShop = this.curShop;
            data.curUcp = this.curUcp;
            data.curTime = this.curTime;
            this.$emit("loadData", data);
        },

        /***选择自定义时间*****/
        selectDate(st, et) {
            let data = {};
            this.curTime.id = 5;
            this.curTime.st = st;
            this.curTime.et = et;
            data.curShop = this.curShop;
            data.curUcp = this.curUcp;
            data.curTime = this.curTime;
            this.curTime.name = st + this.toTxt + et;
            this.$emit("loadData", data);
        },
    },
};
</script>

<style lang="scss">
.s-m-box {
    padding: 0 80px;
    height: 40px;
    width: calc(100% - 160px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #ededed solid;
    background-color: #eee;
    .s-box {
        cursor: pointer;
        width: 33%;
        text-align: center;
    }
    .mask-top {
        top: 40px;
        width: calc(100% - 160px);
        z-index: 999;
        margin-left: 240px;
        .cate-content {
            .c-list {
                max-height: 400px;
                .cate-item {
                    color: #333;
                    padding: 5px;
                    border-bottom: 1px #f1f1f1 solid;
                    position: relative;
                    cursor: pointer;
                    .selected-icon {
                        position: absolute;
                        color: #3388ff;
                        right: 100px;
                        top: -10px;
                        font-size: 30px;
                    }
                }

                .cate-item-s {
                    color: #3388ff;
                    background-color: #dfdfdf;
                }
            }
        }
    }
}
</style>
